<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../script/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			body {
				color: #3E9FEC;
				background-color: #FFF;
			}
			.mui-table-view-cell:after {
				background-color: #E2E2E4
			}
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.wrong {
				color: #e02a53
			}
			.undo {
				color: #4fd2c2;
			}
			.item-col {
				width: 20%;
				float: left;
				margin-top: 15px;
				margin-bottom: 10px;
			}
			.item {
				background-color: #f0f0f0;
				width: 32px;
				height: 32px;
				font-size: 14px;
				line-height: 32px;
				text-align: center;
				border-radius: 16px;
				margin: 0px auto;
			}
			.itempad {
				/*margin-top: 80px;*/
				
				padding: 20px 50px;
			}
			.itempad p {
				color: #fff;
				font-size: 15px;
			}
			.items-row {} .mui-btn-positive {
				background-color: #4fd2c2;
				border: 1px solid #4fd2c2;
			}
			.itempad2 .items-row {
				padding: 50px 50px;
				background-color: #fff;
			}
			.itempad2 .items-row p {
				font-size: 15px;
				color: #30A4ED;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="content">

		</div>

		<script type="text/html" id="contentTem">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<h4>订单描述:</h4>
					<p id="title">{{#title}}</p>
					<p>总金额:{{amount}}元</p>
				</li>
				<li class="mui-table-view-cell">
					<h4>课程内容:</h4>
					<h5 style="font-weight: bold;">该课程包含试题{{count}}套:</h5>
					<p>
						{{each content}} {{$value.title}}&nbsp;&nbsp; {{/each}}
					</p>
				</li>
				<li class="mui-table-view-cell">
					<h4>订单状态:</h4>
					<p>
						{{if status=="paid"}}已付款{{/if}}{{if status=="created"}}未付款{{/if}}{{if status=="cancelled"}}已取消{{/if}}
					</p>
					{{if status=="created"}}
					<button class="mui-btn mui-btn-positive" id="pay" data-sn="{{sn}}" data-amount="{{amount}}" data-des="{{title}}">&nbsp;&nbsp;支付订单({{amount}}元)&nbsp;&nbsp;</button>
					{{/if}} {{if status=="paid"}}
					<button class="mui-btn mui-btn-negative" id="begin" data-course="{{targetid}}">&nbsp;&nbsp;开始做题&nbsp;&nbsp;</button>
					{{/if}}
				</li>
			</ul>
		</script>

		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			MYPAGE = {};
			template.helper('$parse', function(data) {
				return JSON.parse(data.replace(/\\\\/g, "\\"));
			});
			template.helper('$toObj', function(data) {
				return JSON.parse(data);
			});

			function success(ret) {
				var html = template('contentTem', ret.data);
				document.getElementById("content").innerHTML = html;
				hideWaiting();
				var payButton = document.getElementById("pay");
				if (payButton) {
					document.getElementById("pay").addEventListener('tap', function() {
						var sn = this.getAttribute('data-sn');
						var amount = this.getAttribute('data-amount');
						var des = this.getAttribute('data-des');
						if (sn != "" && amount != "" && des != "") {
							var obj = api.require('aliPay');
							var subject = des;
							var body = des;
							var tradeNO = sn;
							obj.pay({
								subject: subject,
								body: body,
								amount: amount,
								tradeNO: tradeNO
							}, function(ret, err) {
								if (ret.code == "9000") {
									MYPAGE.paystatus="paysuccess";
									api.alert({
										title: '支付结果',
										msg: "支付成功!",
										buttons: ['确定']
									}, function(ret, err) {
										if (ret.buttonIndex == 1) {
											loadResult(MYPAGE.id);
										}
									});
									api.sendEvent({
										 name: 'paysuccess'
									});
								} else {
									api.alert({
										title: '支付结果',
										msg: msg,
										buttons: ['确定']
									});
								}
							});
						} else {
							api.alert({
								msg: "参数错误，请返回重新进入"
							});
						}
					});
				}
				var beginButton = document.getElementById("begin");
				if (beginButton) {
					beginButton.addEventListener('tap', function() {
						var cid = this.getAttribute('data-course');
						api.openWin({
							name: 'yuce',
							url: 'testlist.html',
							pageParam: {
								type: "pay",
								cid:cid
							}
						});
					});
				}
			}

			function loadResult(id) {
				showWaiting("稍等一下哦！");
				var key = localStorage.getItem('key');
				var url = MYAPP.webroot + "/api/index.php/Home/Order/orderDetail";
				var data = {
					key: key,
					id: id
				};
				api.ajax({
					url: url,
					method: 'post',
					timeout: 30,
					dataType: 'json',
					data: {
						values: data
					},
					returnAll: false
				}, function(ret, err) {
					if (ret) {
						success(ret);
						if (ret.data.limitedtime = 0) {
							localStorage.setItem('timer' + id, ret.data.limitedtime * 60);
						}
						if(ret.status=="created"&&MYPAGE.paystatus=="paysuccess"){
							api.alert({
								title: '支付结果',
								msg:"您已支付成功，但是订单状态更新有一定延迟哦，请稍等片刻再查看订单，如有问题联系管理员"
							});
						}
					} else {
						api.toast({
							msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
							location: 'middle',
							duration: 1000
						});
					}
				});
			}
			apiready = function() {
				var data = api.pageParam;
				loadResult(data.id);
				MYPAGE.id = data.id;
			};
		</script>
	</body>

</html>